<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/text.css" type="text/css">
</head>
<body>
    <div id="app">
        <!-- 列表渲染指令 -->
        <ul>
            <!-- of用于遍历 -->
            <li v-for="(f,index2) of friutSort">
                {{index2+1}}-{{f.name}}-{{f.price}}
            </li>
        </ul>
        <ul>
            <li v-for="(u,key,index2) in user">
                {{index2}}-{{key}}-{{u}}
            </li>
        </ul>
        <p v-if="age===18">111111</p>
        <p v-else-if="58">22222</p>
        <p v-else>3333333</p>
        <template v-if="age===18">aaa</template>
        <template v-else-if="58">bbb</template>
        <template v-else>ccc</template>
        <div :class="{'bcolor':hasColor , 'forecolor':hasNum}">
            <h1>abc</h1>
        </div>
        <div :class="[bgcolorCls,colorCls]">
            <h1>cba</h1>
        </div>
        <div :class="clsProp">
            <h1>321</h1>
        </div>
        <div class="color num">
            <h1>屑屑屑</h1>
            <h1>汶霖</h1>
            <a :href="url">刷新</a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:"谢汶霖",
                ht:"<h1>就是个憨憨</h1>",
                imgSrc:"./imgs/QQ图片20200618173539.gif",
                url:"./index2.html", 
                hasColor:true,
                hasNum:false,
                colorCls:'forecolor',
                age:18,
                friuts:[
                    {name:'苹果',price:5},
                    {name:'香蕉',price:10},
                    {name:'西瓜',price:15},
                    {name:'哈密瓜',price:20},
                ],
                user:{
                username:'admin2000',
                password:'123456',
                telphone:'5616416161'
                }
            },
            computed:{
                newMsg:function(){
                    return this.msg+"茂名白给大狙"
                },
                bgcolorCls:function(){
                    return this.hasColor?'bcolor':''
                },
                clsProp:function(){
                    return{
                        bcolor:this.hasColor,
                        forecolor:this.hasNum
                    }
                },
                friutSort:function(){
                return this.friuts.sort(function(a,b){
                    return a.price-b.price
                })
            }
            },
            filters:{
                formatString:function(val){
                    return val + "， wdnmd"
                }
            },
            methods:{
                handleClick:function(){
                    console.log("臭傻逼点啥");
                },
                otherMsg:function(){
                    return this.msg+"233333"
                }
            },
            mounted:function(){
                console.log('他来了他来了'+new Date().toDateString)
            }
        })
    </script>
</body>
</html>